import React, { FC } from 'react';
import classNames from 'classnames/bind';

import styles from './index.less';

const cx = classNames.bind(styles);

interface InjectProps {
  /** 卡片模块标题 */
  cardTitle: string;
  /** 卡片模块副标题 */
  cardSubTitle?: string;
  /** 是否展示高亮图标 */
  showHighLightIcon?: boolean;
  /** 卡片模块最外层DIV样式 */
  containerStyle?: React.CSSProperties;
  /** 卡片模块最外层DIV类名 */
  containerClassName?: string;
  children?: React.ReactElement
}

const ModuleCard = (props: InjectProps) => {
  const { cardTitle, showHighLightIcon, containerStyle, containerClassName, cardSubTitle, children } = props;

  const moduleCls = cx(styles.moduleCard, containerClassName);

  const titleCls = cx(styles.moduleTitle, {
    highlight: showHighLightIcon,
  });

  return (
    <div className={moduleCls} style={containerStyle}>
      {cardTitle ? <div className={titleCls}>{cardTitle}</div> : null}
      {cardSubTitle ? <div className={styles.subtitle}>{cardSubTitle}</div> : null}
      {children}
    </div>
  );
};

export default ModuleCard;
